﻿<!DOCTYPE html>
<html>

	<head>
		<title>萌宠之家 </title>
		<link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
		<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
		<script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
		<style type="text/css">
			.nav0 {
				width: 900px;
				height: 60px;
				background-color: #fadb6f;
				margin: 0 auto;
			}
			
			.nav1 {
				width: 150px;
				height: 50px;
				background-color: #fadb6f;
				list-style: none;
				text-align: center;
				line-height: 50px;
				font-size: 25px;
				font-family: "微软雅黑";
				color: bisque;
				float: left;
			}
			
			.regist {
				float: right;
				width: 100px;
				height: 40px;
				font-family: "agency fb";
				font-size: 20px;
			}
			
			.login {
				float: right;
				width: 100px;
				height: 40px;
				font-family: "agency fb";
				font-size: 20px;
			}
			
		.nav1	.nav2 {
				width: 150px;
				height: 50px;
				background-color: #fadb6f;
				list-style: none;
				display: none;
			}
			
			.nav2:hover {
				background-color: #E4B9C0;
				color: #F7E1B5;
			}
			
			.nav1:hover .nav2 {
				display: block;
			}
			
			.banner {
				width: 100%;
				height: 500px;
			}
			
			.banner #myCarousel .carousel-inner .item img {
				width: 100%;
				height: 500px;
			}
			
			.top-menu {
				position: absolute;
				z-index: 1;
			}
		#myCarousel	.carousel-control{
				background-image: none;
			}
			.header-bottom-grid .box{
				width: 1000px;
				height:50px;
				margin: 0 auto;
				
			}
		</style>
		<link href="css/bootstrap.css" rel='stylesheet' type='text/css' />
		<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
		<script src="js/jquery.min.js"></script>
		<!-- Custom Theme files -->
		<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
		<!-- Custom Theme files -->
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="keywords" content="EFOREA Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
		<script type="application/x-javascript">
			addEventListener("load", function() {
				setTimeout(hideURLbar, 0);
			}, false);

			function hideURLbar() {
				window.scrollTo(0, 1);
			}
		</script>
		<!--webfont-->
		<link href='http://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
		<link href='http://fonts.googleapis.com/css?family=Niconne' rel='stylesheet' type='text/css'>
	</head>

	<body>
		<!-- header-section-starts -->
		<div class="header-banner">
			<div class="container">
				<div class="home">
					<a href="index.html"><img src="images/home.png" alt="" /></a>
				</div>
				<div class="header-top">
					<div class="social-icons">
						<i class="facebook"></i>
						<i class="twitter"></i>
						<i class="googlepluse"></i>
					</div>
					<span class="menu"></span>
					<div class="top-menu">
						<ul class="nav0">
							<nav class="cl-effect-13">
								<li class="nav1"><a href="doggallery.html">汪星人
						<ul>
							<li class="nav2">主粮</li>
							<li class="nav2">保健</li>
							<li class="nav2">日用</li>
							<li class="nav2">玩具</li>
						</ul>
						</a></li>
								<li class="nav1"><a href="catgallery.html">喵星人
								<ul>
							<li class="nav2">主粮</li>
							<li class="nav2">保健</li>
							<li class="nav2">日用</li>
							<li class="nav2">玩具</li>
						</ul>
								</a></li>
								<li class="nav1"><a href="about.html">关于我们</a></li>
								<li class="nav1"><a href="contact.html">联系我们</a></li>
								<li class="nav1 login"><a href="../后端/Login.aspx">登录</a></li>
								<li class="nav1 regist"><a href="../后端/regist.aspx">注册</a></li>
							</nav>
						</ul>
					</div>
				</div>
				<!--轮播图-->
				<div class="banner">
					<div id="myCarousel" class="carousel slide">
						<!-- 轮播（Carousel）指标 -->
						<ol class="carousel-indicators">
							<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
							<li data-target="#myCarousel" data-slide-to="1"></li>
							<li data-target="#myCarousel" data-slide-to="2"></li>
							<li data-target="#myCarousel" data-slide-to="3"></li>
							<li data-target="#myCarousel" data-slide-to="4"></li>
							<li data-target="#myCarousel" data-slide-to="5"></li>
							<li data-target="#myCarousel" data-slide-to="6"></li>

						</ol>
						<!-- 轮播（Carousel）项目 -->
						<div class="carousel-inner">
							<div class="item active">
								<img src="images/a.png" alt="First slide">
							</div>
							<div class="item">
								<img src="images/b.jpg" alt="Second slide">
							</div>
							<div class="item">
								<img src="images/c.jpg" alt="Third slide">
							</div>
							<div class="item">
								<img src="images/d.png" alt="Forth slide">
							</div>
							<div class="item">
								<img src="images/e.jpg" alt="Fifth slide">
							</div>
							<div class="item">
								<img src="images/f.jpg" alt="Sixth slide">
							</div>
							<div class="item">
								<img src="images/g.jpg" alt="Seventh slide">
							</div>
						</div>
						<!-- 轮播（Carousel）导航 -->
						<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
							<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
							<span class="sr-only">Previous</span>
						</a>
						<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
							<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
							<span class="sr-only">Next</span>
						</a>
					</div>
				</div>
				<!-- script for menu -->
				<script>
					$("span.menu").click(function() {
						$(".top-menu").slideToggle("slow", function() {
							// Animation complete.
						});
					});
				</script>
				<!-- script for menu -->
				<div class="clearfix"></div>

				<div class="clearfix"></div>
				<div class="header-bottom-grids text-center">
					<div class="header-bottom-grid1">
						<img src="images/1.png" alt="" />
						<h4><a href="#主粮">主粮<hr>❤❤❤</a></h4>
						<div class="box">
						
					</div>
					</div>
					
					<div class="header-bottom-grid2">
						<img src="images/1.png" alt="" />
						<h4><a href="#保健">保健<hr>❤❤❤</a></h4>
						<div class="box">
							
						</div>
					</div>
					<div class="header-bottom-grid3">
						<img src="images/1.png" alt="" />
						<h4><a href="#日用">日用<hr>❤❤❤</a></h4>
						<div class="box">
							
						</div>
					</div>
					<div class="header-bottom-grid4">
						<img src="images/1.png" alt="" />
						<h4><a href="#玩具">玩具<hr>❤❤❤</a></h4>
						<div class="">
							
						</div>
					</div>
					<div class="clearfix"></div>
				</div>
			</div>
		</div>
		<!-- header-section-ends -->
		<div class="copyrights">Collect from
			<a href="http://www.cssmoban.com/"></a>
		</div>
		<!-- content-section-starts -->
		<div class="services">
			<div class="container">
				<div class="services-top-grids text-center">
					<div class="secvice-top-grid-1">
						<h3>今日热销</h3>
						<p>全场满300减20，火热抢购中！</p>
						<div class="icon1">
							<i class="icon1"></i>
						</div>
					</div>
					<div class="secvice-top-grid-2">
						<h3>今日热销</h3>
						<p>全场满300减20，火热抢购中！</p>
						<div class="icon1">
							<i class="icon2"></i>
						</div>
					</div>
					<div class="secvice-top-grid-3">
						<h3>今日热销</h3>
						<p>全场满300减20，火热抢购中！</p>
						<div class="icon1">
							<i class="icon3"></i>
						</div>
					</div>
					<div class="secvice-top-grid-4">
						<h3>今日热销</h3>
						<p>全场满300减20，火热抢购中！</p>
						<div class="icon1">
							<i class="icon4"></i>
						</div>
					</div>
					<div class="clearfix"></div>
				</div>
				<div class="box box2">
					<a name="主粮"></a>
				<div class="services-bottom-grids">
					<div class="col-md-3 services-bottom-left">
						<img src="images/s1.jpg" alt="" />
						<h3>比瑞吉</h3>
						<p>天然均衡·享受自然</p>
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<img src="images/s4.jpg" alt="" />
						<h3>养毛犬粮</h3>
						<p>科学配方·呵护皮毛</p>
					</div>
					
					<div class="col-md-6 services-bottom-middle text-center">
						<h3>❤萌宠主粮❤  </h3>
						<img src="images/s3.jpg" />

						<p>今日热推</p>
					</div>
					<div class="col-md-3 services-bottom-right">
						<img src="images/s2.jpg" alt="" />
						<h3>优基</h3>
						<p>富含100亿活的益生菌&nbsp;&nbsp;</p>
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

						<img src="images/s5.jpg" alt="" />
						<h3>贵族Natures Gifts</h3>
						<p>高密度营养粮</p>
					</div>
					<div class="clearfix"></div>
				</div>
	</div>
			</div>
		</div>
		<div class="box box2">
					<a name="保健"></a>
		<div class="items">
			<div class="container">
				<div class="col-md-4 item-1">
					<img src="images/i1.jpg" alt="" />
					<h3>吃出健康皮毛</h3>
				</div>
				<div class="col-md-4 item-2">
					<img src="images/i2.jpg" alt="" />

				</div>
				<div class="col-md-4 item-3 text-center">
					<h4>保健产品</h4>
					<p>最热hot

					</p>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
		</div>
		
		<div class="services">
			<div class="container">
				<div class="services-top-grids text-center">
					<div class="clearfix"></div>
				</div>
			<div class="box box2">
		   <a name="日用"></a>
				<div class="services-bottom-grids">
					<div class="col-md-3 services-bottom-left">
						<img src="images/s9.jpg" alt="" />
						<h3>United Pets</h3>
						<p>米兰原创设计</p>
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						<img src="images/s10.jpg" alt="" />
						<h3>澳洲Industripet</h3>
						<p>缓食碗</p>
					</div>
					<div class="col-md-6 services-bottom-middle text-center">
						<h3>❤萌宠日用❤  </h3>
						<img src="images/s6.jpg" />

						<p>今日热推</p>
					</div>
					<div class="col-md-3 services-bottom-right">
						<img src="images/s7.jpg" alt="" />
						<h3>Petsafe</h3>
						<p>简单宠生活&nbsp;&nbsp;</p>
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

						<img src="images/s8.jpg" alt="" />
						<h3>小佩智能碗</h3>
						<p>每食每克·健康喂养</p>
					</div>
					<div class="clearfix"></div>
				</div>
</div>
			</div>
		</div>
		<div class="box box2">
		   <a name="玩具"></a>
		<div class="items">
			<div class="container">
				<div class="col-md-4 item-1">
					<img src="images/i4.jpg" alt="" />
					<h3>美国KONG</h3>
				</div>
				<div class="col-md-4 item-2">
					<img src="images/i3.jpg" alt="" />

				</div>
				<div class="col-md-4 item-3 text-center">
					<h4>萌宠玩具</h4>
					<p>最热hot

					</p>
				</div>
				<div class="clearfix"></div>
			</div>
		</div>
		<!-- content-section-ends -->
		<!-- footer-section-starts -->
		<div class="footer">
			<div class="copy-rights text-center">
				<p>&copy; 2018 Design by fifth team <a href="http://www.cssmoban.com/" target="_blank" title="萌宠之家">萌宠之家</a> - Collect from <a href="http://www.cssmoban.com/" title="萌宠之家" target="_blank">萌宠之家</a></p>
			</div>
		</div>
		<div class="footer-wrapper">
<div class="info clearfix">
<div class="footer-phone fl">
<img class="fl mt5 dogphone" src="//static.epetbar.com/www/newFooter/dog_phone.gif">
<div class="footer-number fl">
<h2 class="ft12 c444 bold">售后电话：</h2>
<p class="c666 ft20 mt20">400-888-9200<span class="ml5 ft12">(免长途费)</span></p>
<p class="c666 ft20 mt10">023-65584888</p>
<p class="c666 ft12 mt10">服务时间：09:00--18:30（周一到周日）</p>
</div>
</div>
		<!-- fooeter-section-ends -->
	</body>

</html>